<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ECSHOP Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/general.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script language="JavaScript">
<!--
var noHelp   = "<p align='center' style='color: #666'><?php echo $this->_var['lang']['no_help']; ?></p>";
var helpLang = "<?php echo $this->_var['help_lang']; ?>";
//-->
</script>

<style type="text/css">
body {
  background: #22282e;
}
a:hover{text-decoration:none;}
#tabbar-div {
  background: #394555;
  width:100%;
  text-align:center;
  height: 30px;
  position:fixed;
  z-index:10;
  
}
#tabbar-div a{
 display:block;
 padding-top:10px;
 height:20px;
 background:url(images/open.png) no-repeat center
}
#tabbar-div.on a{background:url(images/open_close.png) no-repeat center}

#tabbar-div img{vertical-align:middle;}
#tabbar-div p {
  margin: 1px 0 0 0;
}
.tab-front {
  background: #80BDCB;
  line-height: 20px;
  font-weight: bold;
  padding: 4px 15px 4px 18px;
  border-right: 2px solid #335b64;
  cursor: hand;
  cursor: pointer;
}
.tab-back {
  color: #F4FAFB;
  line-height: 20px;
  padding: 4px 15px 4px 18px;
  cursor: hand;
  cursor: pointer;
}
.tab-hover {
  color: #F4FAFB;
  line-height: 20px;
  padding: 4px 15px 4px 18px;
  cursor: hand;
  cursor: pointer;
  background: #2F9DB5;
}
#top-div
{
  padding: 3px 0 2px;
  background: #BBDDE5;
  margin: 5px;
  text-align: center;
}
#main-div {
  background: #22282e;
  padding-top:30px;
}
#menu-list {
  padding: 0;
  margin: 0;
}
#menu-list ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  color: #335B64;
  position:relative
}
#menu-ul ul{display:none;}
#menu-list li {
  line-height: 38px;
  cursor: hand;
  cursor: pointer;
  border-bottom:solid 1px #293038;
  overflow:hidden;
  clear:both;
}
#menu-list >ul>li {
  border-bottom:solid 1px #293038;
}

#menu-list li span{
  display:block;
  overflow:hidden;
  padding-left:15px;
  font-size:14px;
  color:#fff;
  line-height:40px;
  background: url(images/menu_plus.png) no-repeat 155px 16px;
  
}
#menu-list li span font{transition:all 0.15s ease}
#menu-list li span:hover font{padding-left:3px;}
#menu-list li.on span{
	  background: url(images/menu_minus.png) no-repeat 154px 15px;
}
#menu-list li span img{
	display:inline-block;
	float:left;
	padding:10px 15px 8px;
}

#menu-list li a {
	transition:all 0.15s ease;
	display:block;
    padding-left:70px;
    color:#fff;
    background:#293038;
}
#menu-list li a:hover{
    background:#414b56;
}

#menu-list a.active {
  background:#414b56;
}
.explode {
  
  font-weight: bold;
}
.collapse {
 
  font-weight: bold;
}
.menu-item {
  background: #293038;
  font-weight: normal;
}
#help-title {
  font-size: 14px;
  color: #000080;
  margin: 5px 0;
  padding: 0px;
}
#help-content {
  margin: 0;
  padding: 0;
}
.tips {
  color: #CC0000;
}
.link {
  color: #000099;
}
.short #menu-ul span font{display:none;}
.short #menu-list >ul>li {
  border-bottom:solid 1px #293038;
  height:36px;
}

</style>

</head>
<body>
<div id="tabbar-div">
<!--<p><span style="float:right; padding: 3px 5px;" ><a href="javascript:toggleCollapse();"><img id="toggleImg" src="images/menu_minus.gif" width="9" height="9" border="0" alt="<?php echo $this->_var['lang']['collapse_all']; ?>" /></a></span>
  <span class="tab-front" id="menu-tab"><?php echo $this->_var['lang']['menu']; ?></span>
</p>
-->
<a href="javascript:toggleCollapse();"></a>
</div>
<div id="main-div">
<div id="menu-list">
<ul id="menu-ul">
<?php $_from = $this->_var['menus']; if (!is_array($_from) && !is_object($_from)) { settype($_from, 'array'); }; $this->push_vars('k', 'menu');$this->_foreach['menu'] = array('total' => count($_from), 'iteration' => 0);
if ($this->_foreach['menu']['total'] > 0):
    foreach ($_from AS $this->_var['k'] => $this->_var['menu']):
        $this->_foreach['menu']['iteration']++;
?>
<?php if ($this->_var['menu']['action']): ?>
  <li class="explode"><a href="<?php echo $this->_var['menu']['action']; ?>" target="main-frame"><?php echo $this->_var['menu']['label']; ?></a></li>
<?php else: ?>
  <li class="explode" key="<?php echo $this->_var['k']; ?>" name="menu">
    <span><img src="images/main_left_ico_<?php echo $this->_foreach['menu']['iteration']; ?>.png" /><font><?php echo $this->_var['menu']['label']; ?></font></span>
    <?php if ($this->_var['menu']['children']): ?>
    <ul>
    <?php $_from = $this->_var['menu']['children']; if (!is_array($_from) && !is_object($_from)) { settype($_from, 'array'); }; $this->push_vars('', 'child');if (count($_from)):
    foreach ($_from AS $this->_var['child']):
?>
      <li class="menu-item"><a href="<?php echo $this->_var['child']['action']; ?>" target="main-frame"><?php echo $this->_var['child']['label']; ?></a></li>
    <?php endforeach; endif; unset($_from); ?><?php $this->pop_vars();; ?>
    </ul>
    <?php endif; ?>
  </li>
<?php endif; ?>
<?php endforeach; endif; unset($_from); ?><?php $this->pop_vars();; ?>
  <script language="JavaScript" src="http://api.ecshop.com/menu_ext.php?charset=<?php echo $this->_var['charset']; ?>&lang=<?php echo $this->_var['help_lang']; ?>"></script>
</ul>
</div>
<div id="help-div" style="display:none">
<h1 id="help-title"></h1>
<div id="help-content"></div>
</div>
</div>
<script>
function toggleCollapse(){
	var main=$(parent.frames["drag-frame"].document).find("#img");
	//$(parent.document.find('#frame-body')).attr('cols','80, 10, *')
	//alert($("#main-div").attr("class")	)
	var cla=$("#main-div").attr("class");
	if(cla==''||cla==undefined){
		$("#main-div").addClass('short')
		$("#menu-ul>li").removeClass('on')
		$("#tabbar-div").addClass('on')
		parent.document.getElementById('frame-body').setAttribute('cols','80, 10, *')
		main.attr('src','images/arrow_right.gif')
	}else{
		$("#main-div").removeClass('short')
		$("#tabbar-div").removeClass('on')
		parent.document.getElementById('frame-body').setAttribute('cols','200, 10, *')
		main.attr('src','images/arrow_left.gif')
	}
}
$(function(){
	$("#menu-ul").on("click",">li span",function(){
		parent.document.getElementById('frame-body').setAttribute('cols','200, 10, *')
		var main=$(parent.frames["drag-frame"].document).find("#img");
		main.attr('src','images/arrow_left.gif')
		$("#main-div").removeClass('short')
		$("#tabbar-div").removeClass('on')
		var obj=$(this).parent();
		$("#menu-ul ul").hide()
		if(obj.hasClass('on')){
			obj.removeClass('on')
			$(this).next().slideUp()
		}else{
			$("#menu-ul>li").removeClass('on')
			obj.addClass('on')	
			$(this).next().slideDown()
		}
	}).on("click","a",function(){
		var html=$.trim($(this).html())
		$("#menu-ul a").removeClass('active')	
		$(this).addClass('active')
		var top=$(parent.frames["header-frame"].document);	
		top.find('#menu-div ul li').removeClass('active')
		top.find('#menu-div ul li').each(function(k,v){
			if($.trim($(v).find("a").html())==html){
				top.find('#menu-div ul li').eq(k).addClass('active')	
			}	
		})
	})
})
</script>

</body>
</html>